<template>
  <div class="app-container">
    <div ref="chart" style="width: 100%; height: 250px; overflow-y: scroll;"></div>
  </div>
</template>

<script>
    import * as echarts from "echarts";
    import {queryWaveFormByPixelList} from "@/api/system/sleeper";

    export default {
      props:{
        // 数量限制
        lineNo: {
          type: Number,
          default: 1,
        },
        param: {
          type: Object,
          default: null
        }
      },
      watch:{
        lineNo: {
          handler(val) {
            if (val) {
              this.queryParams.lineNo = val
              this.handleQuery()
            }
          },
          deep: true,
          immediate: true
        },
        param(val){
          if(val){
            this.queryParams.startPixelNo = val.startPixelNo
            this.queryParams.endPixelNo = val.endPixelNo
            this.queryParams.moveNum = val.moveNum
            this.queryParams.moveSign = val.moveSign
            this.handleQuery()
          }
        }
      },
        data() {
            return {
                total:0,
                queryParams:{
                    pageNum: 1,
                    pageSize: 10,
                    lineNo: 1,
                  startPixelNo: 0,
                  endPixelNo: 18000,
                  moveSign: 'add',
                  moveNum: 90,
                    startKm: 0.0,
                    endKm: 0.0
                },
                chartInstance: null,
                dataKey:['轨距(mm)','地面标志物'],
                colorArray: ['#EF7E71','#F1BC38'],
                dynamicHeight: 0,
                metersData: [],
                kmData: [],
                leftHighLowData:[],
                rightHighLowData:[],
                leftRailDireData:[],
                rightRailDireData: [],
                railDistanceData: [],
                triangleHoleData: [],
                groundMarkersData: [],
            };
        },
        mounted() {
            this.initChart();
            this.handleQuery()
        },
        methods: {
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            async getList(){
                this.metersData = []
                this.kmData = []
                this.leftHighLowData = []
                this.rightHighLowData = []
                this.leftRailDireData = []
                this.rightRailDireData = []
                this.railDistanceData = []
                this.triangleHoleData = []
                this.groundMarkersData = []
                const res = await queryWaveFormByPixelList(this.queryParams)
                this.total = res.total
                res.rows.forEach(item=>{
                    this.metersData.push(item.pixelNo)
                    this.kmData.push(item.km)
                    this.leftHighLowData.push(item.leftHighLow)
                    this.rightHighLowData.push(item.rightHighLow)
                    this.leftRailDireData.push(item.leftRailDire)
                    this.rightRailDireData.push(item.rightRailDire)
                    this.railDistanceData.push(item.railDistance)
                    this.triangleHoleData.push(item.triangleHole)
                    this.groundMarkersData.push(item.groundMarkers)
                })
                this.updateChart()
            },
            initChart() {
                this.chartInstance = echarts.init(this.$refs.chart);
            },
            updateChart(){
                const grids = []
                const xAxis = []
                const yAxis = []
                const series = []
                const xData = this.metersData
                // const kmData  = this.kmData
                // const leftHighLowData = this.leftHighLowData
                // const rightHighLowData = this.rightHighLowData
                // const leftRailDireData = this.leftRailDireData
                // const rightRailDireData = this.rightRailDireData
                // const railDistanceData = this.railDistanceData
                // const triangleHoleData = this.triangleHoleData
                // const groundMarkersData = this.groundMarkersData
                const that = this
                this.dataKey.forEach(function (currentValue, index, array) {
                    let yData = []
                    if(currentValue=='左高低(mm)'){
                        yData = that.leftHighLowData
                    }else if(currentValue=='右高低(mm)'){
                        yData = that.rightHighLowData
                    }else if(currentValue=='左轨向(mm)'){
                        yData = that.leftRailDireData
                    }else if(currentValue=='右轨向(mm)'){
                        yData = that.rightRailDireData
                    }else if(currentValue=='轨距(mm)'){
                        yData = that.railDistanceData
                    }else if(currentValue=='三角坑(mm)'){
                        yData = that.triangleHoleData
                    }else if(currentValue=='地面标志物'){
                        yData = that.groundMarkersData
                    }
                    console.log(xData)
                    //按照参数的个数添加grid，需要叠加计算的是，距离bottom的高度，一个距离100，2个距离200
                    let height = (index+1) * 60
                    grids.push({
                        show:true,
                        left: 0,
                        right:0,
                        bottom: height,
                        height: 60, // 折线图高度
                        backgroundColor: index % 2 === 1 ? '#f0f0f0' : 'white'
                    })

                    // xAxis
                    if(index==0){
                        xAxis.push({
                            gridIndex: 0, //x 轴所在的 grid 的索引
                            type: 'category', //类目轴
                            boundaryGap: false, //坐标轴两边留白策略，
                            axisLine: {
                                //是否显示坐标轴轴线。
                                onZero: false,
                                lineStyle: {
                                    color: 'black',
                                    width: 2,
                                },
                            },
                            //车站标注
                            axisLabel: {
                                // interval: 0,//自适应X轴间距
                                formatter: function (params) {
                                    // 自定义div
                                    // console.log(typeof(params))
                                    let res;
                                    if (params.includes('站')) {
                                        res = '{abg11|' + params + '}';
                                    } else {
                                        res = '{abg1|' + params + '}';
                                    }

                                    return res;
                                },
                                rich: {
                                    abg11: {
                                        backgroundColor: '#2B8AFD',
                                        width: '100%',
                                        align: 'right',
                                        height: 22,
                                        borderRadius: 3,
                                        padding: [2, 4, 2, 4],
                                        color: '#ffffff',
                                    },
                                    abg1: {
                                        color: '#595959',
                                    },
                                },
                            },
                            data: xData,
                            show: true, //是否显示 x 轴。
                        })
                    }else{
                        xAxis.push({
                            gridIndex: index, //x 轴所在的 grid 的索引
                            type: 'category', //类目轴
                            boundaryGap: false, //坐标轴两边留白策略，
                            axisLine: {
                                onZero: true, //X 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
                                lineStyle: {
                                    color: '#979797',
                                },
                            },
                            data: xData,
                            show: true, //是否显示 x 轴。
                            axisTick: {
                                //坐标轴刻度相关设置
                                show: false,
                            },
                            axisLabel: {
                                //刻度标签
                                show: false,
                            },
                        })
                    }


                    // yAxis
                    // 修改y轴 （可显示刻度）（需要修改 gridIndex 0 1 2 ...）
                    yAxis.push({
                        gridIndex: index, //y 轴所在的 grid 的索引
                        type: 'value',
                        // name: "PM2.5",//纵坐标名字
                        // nameLocation: "middle",//纵坐标名字的位置
                        // nameGap: 30,//纵坐标名字与轴线之间的距离
                        position: 'left', //y轴的位置
                        inverse: false,
                        splitLine: {
                            //坐标轴在 grid 区域中的分割线
                            show: false,
                        },
                        axisLine: {
                            //坐标轴轴线相关设置  竖着那一根
                            show: true,
                            lineStyle: {
                                color: '#979797',
                            },
                        },
                        axisTick: {
                            //坐标轴刻度相关设置
                            show: false,
                        },
                        axisLabel: {
                            //刻度标签
                            show: false,
                        },
                    })

                    // 7.最后修改series 每个参数是一个对象
                    series.push({
                        //参数的名字-数据注入
                        name: currentValue,
                        type: 'line',
                        color: that.colorArray[index],
                        // 设置不显示小圆圈
                        symbol: 'none',
                        showSymbol: false,
                        xAxisIndex: index, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: index, //使用的 y 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        symbolSize: 8, //标记的大小
                        //   hoverAnimation: false,
                        smooth: true, //平滑曲线
                        //每个grid的数据-数据注入
                        data: yData,
                        markLine: {
                            symbol: 'none', //去掉箭头
                            //最大值和最小值
                            data: [
                                {
                                    // type: 'median', //中位数。
                                    type: 'average', //中位数。
                                    symbol: 'none', //去掉开始的原点
                                    label: {
                                        //字体设置
                                        show: 'true',
                                        position: 'insideEndTop',
                                        distance: 5,
                                        formatter: currentValue,
                                        color: 'inherit',
                                    },
                                    lineStyle: {
                                        //横线设置
                                        width: 1,
                                    },
                                },
                            ],
                        },
                        lineStyle: {
                            shadowColor: that.colorArray[index], //透明的颜色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            opacity: 0.8, //透明度
                            shadowBlur: 8, //阴影大小
                            type: "solid", //实线
                            width: 2,
                        },
                    })
                });
                const option = {
                    grid: grids,
                    xAxis: xAxis,
                    yAxis: yAxis,
                    series:series,
                    dataZoom: [ // 添加 dataZoom 配置
                        {
                            type: 'inside', // 内置 dataZoom 组件
                            xAxisIndex: 'all', // 控制所有 x 轴
                            start: 0, // 缩放起始百分比
                            end: 100 // 缩放结束百分比
                        },
                        {
                            type: 'slider', // slider 类型的 dataZoom 组件，可选
                            show: true, // 是否显示
                            xAxisIndex: 'all', // 控制所有 x 轴
                            start: 0, // 缩放起始百分比
                            end: 100 // 缩放结束百分比
                        }
                    ],
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration: 0,
                        confine: true,
                        bordeRadius: 4,
                        borderWidth: 1,
                        borderColor: '#333',
                        backgroundColor: 'rgba(255,255,255,0.9)',
                        textStyle: {
                            fontSize: 14,
                            lineHeight: 32,
                            color: 'black'
                        },
                        formatter: function(params, ticket, callback) {
                            params.sort((a, b) => a['axisIndex'] > b['axisIndex'] ? 1 : -1)
                            let res = "像素点："+params[0].name
                            for (let i = 0, l = params.length; i < l; i++) {
                                res += `<br/><span style="color:${params[i].color};">` + params[i].seriesName + ' : ' + params[i].value + '</span>'
                            }
                            return res
                        }
                    },
                    axisPointer: {
                        type: 'shadow',
                        link: {
                            xAxisIndex: 'all'
                        }
                    },
                }
                this.chartInstance.setOption(option);
            },

            //获得动态高度
            getHeight(num){
                this.dynamicHeight = `${num * 100 + 150}px`;
            },
        },
    };
</script>
